<!--评论模块-->
<template>
  <div class="app-container">
    <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['communication:communication:add']"
        >发布</el-button>
    <div class="comment" v-for="item in comments" :key=item.ucId><!--key-->
      <div class="info">
        <img class="avatar" :src="'/dev-api'+item.userAvatar" width="36" height="36"/>
        <div class="right">
          <div class="name">{{item.userName}}</div>
          <div class="date">{{parseTime(item.date)}}</div>
        </div>
      </div>
      <div class="content">{{item.content}}</div>
      <div class="control">
        <span class="like" :class="{active: item.isLike}" @click="likeClick(item)">
          <i class="iconfont icon-like"></i>
          <span class="like-num">{{item.likeNum > 0 ? item.likeNum + '人赞' : '赞'}}</span>
        </span>
        <span class="comment-reply" @click="showCommentInput(item)">
          <i class="iconfont icon-comment"></i>
          <span class="like-num">{{item.replyNum > 0 ? item.replyNum + '人评论' : '评论'}}</span>
          <!--<span>回复</span>-->
        </span>
      </div>
      <div class="reply">
        <div class="item" v-for="reply in item.reply" :key=reply.ucId><!--key-->
<!--
          <div class="info">
            <img class="avatar" :src="reply.userAvatar" width="36" height="36"/>
            <div class="right">
              <div class="name">{{reply.userName}}</div>
              <div class="date">{{parseTime(reply.date)}}</div>
            </div>
          </div>
          <div class="content">{{reply.content}}</div>
-->
          <div class="reply-content">   
            <div class="info">
              <img class="avatar" :src="'/dev-api'+reply.userAvatar" width="36" height="36"/>
              <div class="right">
                <!--<div class="name">{{reply.userName}}</div>
                <div class="date">{{parseTime(item.date)}}</div>-->
              </div>
            </div>
            <span class="from-name">{{reply.userName}}</span><span>: </span>
            <span class="to-name">@{{reply.toName}}</span>
            <span>{{reply.content}}</span>
          </div>
          <div class="reply-bottom">
            <span>{{parseTime(reply.date)}}</span>
            <span class="reply-text" @click="showCommentInput(item, reply)">
              
              <i class="iconfont icon-comment"></i>


              <div class="control">
                <span class="like" :class="{active: reply.isLike}" @click="likeClick(reply)">
                  <i class="iconfont icon-like"></i>
                  <span class="like-num">{{reply.likeNum > 0 ? reply.likeNum + '人赞' : '赞'}}</span>
                </span>
                <span class="comment-reply" @click="showCommentInput(reply)">
                  <i class="iconfont icon-comment"></i>
                  <span class="like-num">{{reply.replyNum > 0 ? reply.replyNum + '人评论' : '评论'}}</span>
                  <!--<span>回复</span>-->
                </span>
              </div>


              <!--<span>回复</span>-->
            </span>
          </div>
          
          <div class="item" v-for="reply2 in reply.reply" :key=reply2.ucId><!--key-->
          <div class="reply-content">   
            <div class="info">
              <img class="avatar" :src="'/dev-api'+reply2.userAvatar" width="36" height="36"/>
              <div class="right">
                <!--<div class="name">{{reply.userName}}</div>
                <div class="date">{{parseTime(item.date)}}</div>-->
              </div>
            </div>
            <span class="from-name">{{reply2.userName}}</span><span>: </span>
            <span class="to-name">@{{reply2.toName}}</span>
            <span>{{reply2.content}}</span>
          </div>
          <div class="reply-bottom">
            <span>{{parseTime(reply2.date)}}</span>



            <div class="control">
                <span class="like" :class="{active: reply.isLike}" @click="likeClick(reply2)">
                  <i class="iconfont icon-like"></i>
                  <span class="like-num">{{reply.likeNum > 0 ? reply.likeNum + '人赞' : '赞'}}</span>
                </span>
            </div>
            <!--<span class="reply-text" @click="showCommentInput(reply, reply2)">
              <i class="iconfont icon-comment"></i>
              <span>回复</span>
            </span>-->
          </div>
              
          
        </div>
          
        </div>
        <div class="write-reply" v-if="item.reply.length > 0" @click="showCommentInput(item)">
          <i class="el-icon-edit"></i>
          <span class="add-comment">添加新评论</span>
        </div>
        <transition name="fade">
          <div class="input-wrapper" v-if="showItemId === item.ucId">
            <el-input class="gray-bg-input"
                      v-model="form.content"
                      type="textarea"
                      :rows="3"
                      autofocus
                      placeholder="写下你的评论">
            </el-input>
            <div class="btn-control">
              <span class="cancel" @click="cancel">取消</span>
              <el-button class="btn" type="success" round @click="commitComment">确定</el-button>
            </div>
          </div>
        </transition>
      </div>
    </div>
    <!-- 添加或修改用户交流对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px">
      <el-form ref="form" :model="form2" :rules="rules" label-width="80px">
        <el-form-item label="发表内容" prop="content">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入发表内容"
            v-model="form2.content">
</el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  import Vue from 'vue';
  import { addCommunication,getCommunication,updateCommunication} from "@/api/communication/communication";

  export default {
    props: {
      comments: {
        type: Array,
        required: true
      }
    },
    components: {},
    data() {
      return {
        commentData:{},
        likeCom:{},
        form:{content:''},
        inputComment: '',
        showItemId: '',
        // 表单参数
        form2: {},
        // 表单校验
        rules: {},
        title:'',
        // 是否显示弹出层
        open: false,
      }
    },
    computed: {},
    methods: {
      /** 新增按钮操作 */
      handleAdd() {
      this.reset();
	    //this.getTreeselect();
      this.open = true;
      this.title = "发表交流";
    },
      // 表单重置
    reset() {
      this.form2 = {
        ucId: undefined,
        userAvatar: undefined,
        userName: undefined,
        toName: undefined,
        date: undefined,
        content: undefined,
        likeNum: undefined,
        ucPId: undefined,
        replyNum: undefined
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form2.ucPId=0;
          this.form2.replyNum=0;
            addCommunication(this.form2).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                //this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
        }
      });
    },
      /**
       * 点赞
       */
      likeClick(item) {
        if (item.isLike === null) {
          Vue.$set(item, "isLike", true);
          item.likeNum++
          this.likeCom.likeNum=this.likeCom.likeNum+1;
        } else {
          if (item.isLike) {
            item.likeNum--;
            this.likeCom.likeNum=this.likeCom.likeNum-1;
          } else {
            item.likeNum++
            this.likeCom.likeNum=this.likeCom.likeNum+1;
          }
          item.isLike = !item.isLike;
        }
        updateCommunication(item).then(response=>{
          
        })
      },

      /**
       * 点击取消按钮
       */
      cancel() {
        this.open = false;
        this.reset();
        this.showItemId = ''
      },

      /**
       * 提交评论
       */
      commitComment() {
        if(this.splitName!=""){
            this.form.content=this.form.content.split(this.splitName)[1];
        }
        addCommunication(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("评论成功");
                this.open = false;
                //this.getCommunication(); todo:更新
              } else {
                this.msgError(response.msg);
              }
        });
        this.commentData.replyNum=this.commentData.replyNum+1;
        //alert(this.commentData.replyNum)
        updateCommunication(this.commentData).then(response=>{
          
        })
      },

      /**
       * 点击评论按钮显示输入框
       * item: 当前大评论
       * reply: 当前回复的评论
       */
      showCommentInput(item, reply) {
        this.commentData=item;
        this.splitName="";
        if (reply) {
          this.splitName="@" + reply.userName + " ";
          this.form.content = "@" + reply.userName + " ";
          this.showItemId = item.ucId;
          this.form.toName = reply.userName;
          this.form.ucPId=reply.ucId;
          this.form.toId=reply.userId;
        } else {
          this.form.content= '';
          this.showItemId = item.ucId;
          this.form.toName = item.userName;
          this.form.ucPId=item.ucId;
          this.form.toId=item.userId;
        }
        
      }
    },
    created() {
      //console.log(this.comments)
    }
  }
</script>

<style scoped lang="scss">

  //@import "../../public/scss/index";
  @import "./scss";

  .app-container {
    padding: 0 10px;
    box-sizing: border-box;
    .comment {
      display: flex;
      flex-direction: column;
      padding: 10px;
      border-bottom: 1px solid $border-fourth;
      .info {
        display: flex;
        align-items: center;
        .avatar {
          border-radius: 50%;
        }
        .right {
          display: flex;
          flex-direction: column;
          margin-left: 10px;
          .name {
            font-size: 16px;
            color: $text-main;
            margin-bottom: 5px;
            font-weight: 500;
          }
          .date {
            font-size: 12px;
            color: $text-minor;
          }
        }
      }
      .content {
        font-size: 16px;
        color: $text-main;
        line-height: 20px;
        padding: 10px 0;
      }
      .control {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: $text-minor;
        .like {
          display: flex;
          align-items: center;
          margin-right: 20px;
          cursor: pointer;
          &.active, &:hover {
            color: $color-main;
          }
          .iconfont {
            font-size: 14px;
            margin-right: 5px;
          }
        }
        .comment-reply {
          display: flex;
          align-items: center;
          cursor: pointer;
          &:hover {
            color: $text-333;
          }
          .iconfont {
            font-size: 16px;
            margin-right: 5px;
          }
        }

      }
      .reply {
        margin: 10px 0;
        border-left: 2px solid $border-first;
        .item {
          margin: 0 10px;
          padding: 10px 0;
          border-bottom: 1px dashed $border-third;
          .reply-content {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: $text-main;
            .from-name {
              color: $color-main;
            }
            .to-name {
              color: $color-main;
              margin-left: 5px;
              margin-right: 5px;
            }
          }
          .reply-bottom {
            display: flex;
            align-items: center;
            margin-top: 6px;
            font-size: 12px;
            color: $text-minor;
            .reply-text {
              display: flex;
              align-items: center;
              margin-left: 10px;
              cursor: pointer;
              &:hover {
                color: $text-333;
              }
              .icon-comment {
                margin-right: 5px;
              }
            }
          }
        }
        .write-reply {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: $text-minor;
          padding: 10px;
          cursor: pointer;
          &:hover {
            color: $text-main;
          }
          .el-icon-edit {
            margin-right: 5px;
          }
        }
        .fade-enter-active, fade-leave-active {
          transition: opacity 0.5s;
        }
        .fade-enter, .fade-leave-to {
          opacity: 0;
        }
        .input-wrapper {
          padding: 10px;
          .gray-bg-input, .el-input__inner {
            /*background-color: #67C23A;*/
          }
          .btn-control {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-top: 10px;
            .cancel {
              font-size: 16px;
              color: $text-normal;
              margin-right: 20px;
              cursor: pointer;
              &:hover {
                color: $text-333;
              }
            }
            .confirm {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
</style>